<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>学生学习管理系统</title>
<style>
body, html {
  margin: 0;
  padding: 0;
  font-family: 'Arial', sans-serif;
  background-color: #e7f2fb;
}

.header {
  background-color: #007bff;
  color: white;
  padding: 10px 0;
  text-align: center;
  font-size: 20px;
}

.calendar {
  background-color: white;
  padding: 10px;
  display: flex;
  justify-content: space-around;
  align-items: center;
  height: 40vh; /* 日历视图占据屏幕高度的40% */
  margin-bottom: 10px;
}

.day {
  flex: 1;
  text-align: center;
  font-size: 16px;
}

.today {
  color: #007bff;
  font-weight: bold;
}

.features {
  display: flex;
  justify-content: space-around;
  margin-bottom: 20px;
}

.feature-item {
  background-color: white;
  flex-grow: 1;
  margin: 0 5px;
  padding: 20px;
  text-align: center;
  border-radius: 5px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.2);
  font-size: 16px;
}

/* 使用Unicode字符作为图标 */
.icon {
  display: block;
  font-size: 24px;
  margin-bottom: 8px;
}

.plan-list {
  background-color: white;
  padding: 20px;
  border-radius: 5px;
  margin: 10px;
}

.plan-item {
  border-bottom: 1px solid #e7e7e7;
  padding: 10px 0;
}

.plan-item:last-child {
  border-bottom: none;
}

.navbar {
  display: flex;
  justify-content: space-around;
  background-color: #007bff;
  color: white;
  padding: 10px 0;
  position: fixed;
  bottom: 0;
  width: 100%;
  font-size: 16px;
}

.nav-item {
  flex: 1;
  text-align: center;
}
</style>
</head>
<body>

<div class="header">学生学习管理系统</div>

<div class="calendar">
  <div class="day">SUN</div>
  <div class="day">MON</div>
  <div class="day">TUE</div>
  <div class="day today">WED</div>
  <div class="day">THU</div>
  <div class="day">FRI</div>
  <div class="day">SAT</div>
</div>

<div class="features">
  <div class="feature-item">
    <span class="icon">&#x1F516;</span>
    错题集
  </div>
  <div class="feature-item">
    <span class="icon">&#x1F4DA;</span>
    文章
  </div>
  <div class="feature-item">
    <span class="icon">&#x1F4C2;</span>
    资料
  </div>
  <div class="feature-item">
    <span class="icon">&#x1F4DD;</span>
    重点难点
  </div>
</div>

<div class="plan-list">
    <div class="plan-item">数学作业 <span>07:00 - 07:30</span></div>
  <div class="plan-item">英语单词 <span>08:00 - 08:30</span></div>

</div>

<div class="navbar">
  <div class="nav-item">主页</div>
  <div class="nav-item">错题集</div>
  <div class="nav-item">文章</div>
  <div class="nav-item">资料</div>
  <div class="nav-item">重点难点</div>
</div>

</body>
</html>

